<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="icon" href="${una}/admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>模板管理 - UnaBoot</title>
    <link rel="stylesheet" href="${una}/admin/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/admin/css/adminlte.min.css">
    <link rel="stylesheet" href="${una}/admin/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
    <link rel="stylesheet" href="${una}/admin/plugins/layer/skin/default/layer.css"/>
    <link rel="stylesheet" href="${una}/admin/css/unaboot-admin.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <style>
        .tpl-files .ztree li span.button.switch{
            /*display: none;*/
        }
    </style>
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <#include "/admin/common/header.html"/>
    </nav>
    <aside class="main-sidebar sidebar-dark-teal  elevation-4 ">
        <#include "/admin/common/menu.html"/>
    </aside>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h3 class="m-0 text-dark text-lg">模板管理</h3>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body  p-0">
                                <div class="channel-left">
                                    <div class="header p-4 text-center mb-2">
                                        <button class="btn btn-primary btn-sm mr-2" id="upload-theme"><i class="fa fa-upload"></i> 上传模板</button>
                                        <button class="btn btn-success btn-sm disabled"><i class="fa fa-download"></i> 下载模板</button>
                                    </div>
                                    <div class="channel-tree pl-4 pr-4 pt-0 tpl-files">
                                        <ul id="channel-tree" class="ztree"></ul>
                                    </div>
                                </div>
                                <div class="channel-right">
                                    <div class="tools pl-4 mt-4">
                                        <div class="input-group right mr-2" style="width: 30%;float: left; height: 31px;">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fa fa-level-up"> ../</i></span>
                                            </div>
                                            <input type="text" id="parent-folder" value="themes" readonly class="form-control" style="height: 31px">
                                        </div>
                                        <button type="button" id="new-file" class="btn btn-success btn-sm mr-2">
                                            <i class="fa fa-files-o"></i> 新建模板
                                        </button>
                                        <button type="button" id="new-folder" class="btn btn-info btn-sm mr-2">
                                            <i class="fa fa-folder-open-o"></i> 新建目录
                                        </button>


                                    </div>
                                    <div class="data-list pl-4 mt-4">
                                        <div id="data-table" style="max-height: 640px;overflow-y: auto;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <#include "/admin/common/footer.html"/>
</div>
<script src="${una}/admin/plugins/jquery/jquery.min.js"></script>
<script src="${una}/admin/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="${una}/admin/js/adminlte.min.js"></script>
<script type="text/javascript" src="${una}/admin/plugins/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="${una}/admin/js/dom-resize.js"></script>
<script type="text/javascript" src="${una}/admin/plugins/layer/layer.js"></script>
<script src="${una}/admin/js/navigation.js"></script>
<script type="text/javascript">
    String.prototype.endWith=function(str){
        if(str==null||str==""||this.length==0||str.length>this.length)
            return false;
        if(this.substring(this.length-str.length)==str)
            return true;
        else
            return false;
        return true;
    }
    $(function(){
        var ztreeObj;
        var settings = {
            async:{
                enable:true,
                autoParam:['id'],
                type:'get',
                url:'${una}/admin/theme/treeNodes'
            },
            callback:{
                onAsyncSuccess:expandAll,
                onClick:onClick
            },
            data:{
                simpleData:{
                    enable:true,
                    idKey:'id',
                    pIdKey:'pid',
                    rootPid:-1,
                },
                key:{
                    isParent:'folder'
                }
            },
            view:{
                showIcon:true,
                showLine:true
            }
        }
        ztreeObj = $.fn.zTree.init($("#channel-tree"),settings,[]);
        function expandAll(){
            ztreeObj.expandAll(true);
        }
        function onClick(event,treeId,treeNode){
           // console.log("event:"+event+",treeId:"+treeId+",treeNode:"+treeNode.id);
            if(treeNode.id != "themes"){
                ztreeObj.reAsyncChildNodes(treeNode,"refresh",true);
            }
            var folder = treeNode.id;
            var reg = /\.[^\.]+$/;
            var matches = reg.exec(folder);
            if(!matches){
                $("#parent-folder").val(folder.replace(/\\/g,'/'));
                $.ajax({
                    type:'get',
                    url:'${una}/admin/theme/subFiles',
                    data:{
                        pid:folder
                    },
                    success:function(page){
                      $("#data-table").html(page);
                    }
                });
            }else{
                var id = folder.replace(/\\/g,'/');
                if(id.endWith(".png")||id.endWith(".jpg")||id.endWith(".jpeg")||id.endWith(".gif")||id.endWith(".bmp")||id.endWith(".webp")||id.endWith(".svg")){
                    var img = "<img src='${una}/"+id.substring(7,id.length)+"' class='img-fluid' style='height:500px;'>";
                    layer.open({
                        type: 1,//Page层类型
                        title: '<i class="fa fa-image"></i> '+id,
                        shade: 0.6 ,//遮罩透明度
                        offset:'auto',
                        anim: 1 ,//0-6的动画形式，-1不开启
                        content: img,
                        resize:false
                    });
                }else{
                    layer.open({
                        type:2,
                        title:"<span class='edit-file-title'><i class='fa fa-folder-open text-yellow'></i>.../"+id+"</span>",
                        shadeClose:false,
                        shade:0.4,
                        offset:['55px'],
                        area:['70%','88%'],
                        content:'${una}/admin/theme/editor?path='+id,
                        resize:false,
                        anim:1,
                        maxmin:true,
                        move:false,
                        success:function(layero,index){
                            var iframeWindow = window[layero.find('iframe')[0]['name']];
                            var height = layero.find('iframe')[0]['clientHeight'];
                            iframeWindow.setTextareaHeight(height-47);
                        },
                        full:function(layero){
                            var iframeWindow = window[layero.find('iframe')[0]['name']];
                            var height = layero.find('iframe')[0]['clientHeight'];
                            iframeWindow.setTextareaHeight(height-50);
                        },
                        restore:function(layero){
                            var iframeWindow = window[layero.find('iframe')[0]['name']];
                            var height = layero.find('iframe')[0]['clientHeight'];
                            iframeWindow.setTextareaHeight(height-50);
                        }
                    });
                }

            }
        }
        computerWidth();
        initDataTable();
        $(".container-fluid").resize(function(){
            computerWidth();
        });
        function computerWidth(){
            var channel_left_width = $(".channel-left").width();
            var content_wrapper_width = $(".container-fluid").width();
            $(".channel-right").width(content_wrapper_width - channel_left_width-30);
        }
        function initDataTable(){
            $.ajax({
                type:'get',
                url:'${una}/admin/theme/subFiles',
                success:function(page){
                    $("#data-table").html(page);
                }
            });
        }

        $("#upload-theme").on("click",function(){
            layer.open({
                type:2,
                title:"<i class='fa fa-upload'>上传新的主题文件</i>",
                shadeClose:false,
                shade:0.4,
                offset:['100px'],
                area:['500px','300px'],
                content:'${una}/admin/theme/upload',
                resize:false,
                anim:1
            })
        });
        $(document).on("click",".edit-file",function(){
            var id = $(this).attr("data-id");
            id = id.replace(/\\/g,'/');
            if(id.endWith(".png")||id.endWith(".jpg")||id.endWith(".jpeg")||id.endWith(".gif")||id.endWith(".bmp")||id.endWith(".webp")||id.endWith(".svg")){
                var img = "<img src='${una}/"+id.substring(7,id.length)+"' class='img-fluid' style='height:500px;'>";
                layer.open({
                    type: 1,//Page层类型
                    title: '<i class="fa fa-image"></i> '+id,
                    shade: 0.6 ,//遮罩透明度
                    offset:'auto',
                    anim: 1 ,//0-6的动画形式，-1不开启
                    content: img,
                    resize:false
                });
            }else{
                layer.open({
                    type:2,
                    title:"<span class='edit-file-title'><i class='fa fa-folder-open text-yellow'></i>.../"+id+"</span>",
                    shadeClose:false,
                    shade:0.4,
                    offset:['55px'],
                    area:['70%','88%'],
                    content:'${una}/admin/theme/editor?path='+id,
                    resize:false,
                    anim:1,
                    maxmin:true,
                    move:false,
                    success:function(layero,index){
                        var iframeWindow = window[layero.find('iframe')[0]['name']];
                        var height = layero.find('iframe')[0]['clientHeight'];
                        iframeWindow.setTextareaHeight(height-47);
                    },
                    full:function(layero){
                        var iframeWindow = window[layero.find('iframe')[0]['name']];
                        var height = layero.find('iframe')[0]['clientHeight'];
                        iframeWindow.setTextareaHeight(height-50);
                    },
                    restore:function(layero){
                        var iframeWindow = window[layero.find('iframe')[0]['name']];
                        var height = layero.find('iframe')[0]['clientHeight'];
                        iframeWindow.setTextareaHeight(height-50);
                    }
                });
            }
        });

        $("#new-file").on("click",function(){
           var parent = $("#parent-folder").val();
           if(parent == null || parent.trim() == ""){
               parent = "themes";
           }
           layer.prompt({title:'创建新的模板文件',formType:0},function(fileName,index){
              var suffix = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
              if(suffix === ".png" || suffix === ".jpg"|| suffix === ".jpeg"||suffix === ".gif"|| suffix === ".bmp"||suffix===".webp"){
                  layer.alert("不支持创建图像文件",{title:"系统提示信息",icon:0});
                  return false;
              }else{
                  $.ajax({
                      type:'POST',
                      url:'${una}/admin/theme/newFile',
                      data:{
                          path:parent+"/"+fileName
                      },
                      success:function(){
                          layer.close(index);
                          layer.confirm(fileName+"文件已经创建，现在需要编辑该文件吗?",{
                              btn:['是(Y)','否(N)'],
                              title:'系统提示信息',
                              icon:1
                          },function(index){
                              layer.close(index);
                              var id = parent.replace("/","\\");
                              var pnode = ztreeObj.getNodeByParam("id",id);
                              ztreeObj.selectNode(pnode,false,false);
                              ztreeObj.expandNode(pnode,true,false,true);
                              ztreeObj.reAsyncChildNodes(pnode,"refresh",false);
                              $.ajax({
                                  type:'get',
                                  url:'${una}/admin/theme/subFiles',
                                  data:{
                                      pid:parent
                                  },
                                  success:function(page){
                                      $("#data-table").html(page);
                                  }
                              });
                              layer.open({
                                  type:2,
                                  title:"<span class='edit-file-title'><i class='fa fa-folder-open text-yellow'></i>.../"+parent+"/"+fileName+"</span>",
                                  shadeClose:false,
                                  shade:0.4,
                                  offset:['55px'],
                                  area:['70%','88%'],
                                  content:'${una}/admin/theme/editor?path='+parent+"/"+fileName,
                                  resize:false,
                                  anim:1,
                                  maxmin:true,
                                  move:false,
                                  success:function(layero,index){
                                      var iframeWindow = window[layero.find('iframe')[0]['name']];
                                      var height = layero.find('iframe')[0]['clientHeight'];
                                      iframeWindow.setTextareaHeight(height-47);
                                  },
                                  full:function(layero){
                                      var iframeWindow = window[layero.find('iframe')[0]['name']];
                                      var height = layero.find('iframe')[0]['clientHeight'];
                                      iframeWindow.setTextareaHeight(height-50);
                                  },
                                  restore:function(layero){
                                      var iframeWindow = window[layero.find('iframe')[0]['name']];
                                      var height = layero.find('iframe')[0]['clientHeight'];
                                      iframeWindow.setTextareaHeight(height-50);
                                  }
                              });
                          },function(index){
                              layer.close(index);
                              var id = parent.replace("/","\\");
                             var pnode = ztreeObj.getNodeByParam("id",id);
                              ztreeObj.selectNode(pnode,false,false);
                              ztreeObj.expandNode(pnode,true,false,true);
                             ztreeObj.reAsyncChildNodes(pnode,"refresh",false);
                              $.ajax({
                                  type:'get',
                                  url:'${una}/admin/theme/subFiles',
                                  data:{
                                      pid:parent
                                  },
                                  success:function(page){
                                      $("#data-table").html(page);
                                  }
                              });
                          });
                      },
                      error:function(){
                          layer.close(index);
                          layer.alert("文件创建失败",{title:'系统提示信息',icon:0});
                      }
                  });
              }
           });
        });

        $("#new-folder").on("click",function(){
            var parent = $("#parent-folder").val();
            if(parent == null || parent.trim() == ""){
                parent = "themes";
            }
            layer.prompt({title:"请输入文件夹名称",formType:0},function(folderName,index){
               $.ajax({
                   type:'POST',
                   url:'${una}/admin/theme/newFolder',
                   data:{
                       path:parent+"/"+folderName
                   },
                   success:function(){
                       layer.close(index);
                       layer.alert("文件夹已经创建成功",{title:'系统提示信息',icon:1},function(index){
                          layer.close(index);
                           var id = parent.replace("/","\\");
                           var pnode = ztreeObj.getNodeByParam("id",id);
                           ztreeObj.selectNode(pnode,false,false);
                           ztreeObj.expandNode(pnode,true,false,true);
                           if(parent != "themes"){
                               ztreeObj.reAsyncChildNodes(pnode,"refresh",false);
                           }else{
                               var curren = {
                                   id:id+"\\"+folderName,
                                   pid:id,
                                   name:folderName,
                                   folder:true
                               };
                               ztreeObj.addNodes(pnode,0,curren);
                           }
                           $.ajax({
                               type:'get',
                               url:'${una}/admin/theme/subFiles',
                               data:{
                                   pid:parent
                               },
                               success:function(page){
                                   $("#data-table").html(page);
                               }
                           });
                       });
                   }
               });
            });
        });

        $(document).on("click",".del-opt",function(){
           var path = $(this).attr("data-id");
           layer.confirm("该操作不可逆，确定删除吗？",{
               title:'系统提示信息',
               icon:0,
               btn:['是(Y)','否(N)']
           },function(index){
               var load = layer.load(2,{shade:[0.4,'#f0f0f0f0']});
               $.ajax({
                   type:'POST',
                   url:'${una}/admin/theme/deleteFile',
                   data:{
                       path:path
                   },
                   success:function(){
                       layer.close(load);
                       layer.alert("文件已经删除",{title:'系统提示信息',icon:1},function(alertIndex){
                          var ztreeNode = ztreeObj.getNodeByParam('id',path);
                          var pnode = ztreeNode.getParentNode();
                          ztreeObj.removeNode(ztreeNode);
                           $.ajax({
                               type:'get',
                               url:'${una}/admin/theme/subFiles',
                               data:{
                                   pid:pnode.id
                               },
                               success:function(page){
                                   $("#data-table").html(page);
                               }
                           });
                           layer.close(alertIndex);
                       });
                       layer.close(index);
                   },
                   error:function(){
                       layer.close(load);
                       layer.close(index);
                   }
               });
           },function(index){
              layer.close(index);
           });
        });
    });
</script>
</body>
</html>
